@import "../../style/template";
@import "../../style/vars";

.work {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media #{$mobile} {
    margin-top: 15%;
  }

  &__video {
    margin-top: 3%;
  }

  &__video-source {
    width: 100%;
  }

  &__nick-text {
    @extend %font-title;
    font-size: 27px;

    @media #{$tablet}{
      font-size: 24px;
    }
    @media #{$mobile} {
      font-size: 18px;
    }
  }

  &__info {
    margin-top: 2%;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    @media #{$tablet}{
      height: 140px;
    }
    @media #{$mobile} {
      height: 100px;
    }
  }

  &__info-title{
    @extend %font-title;
    font-size: 33px;

    @media #{$tablet}{
      font-size: 27px;
    }

    @media #{$mobile} {
      font-size: 18px;
    }
  }

  &__info-text{
    @extend %font-title;
    font-size: 25px;

    @media #{$tablet}{
      font-size: 22px;
    }
    @media #{$mobile} {
      font-size: 16px;
    }
  }

  &__info-mail{
    @extend %font-text;
    font-size: 17px;
    color: black;
    text-decoration: none;
    border: 1px solid black;
    border-radius: 10px;
    padding: 4% 30%;

    @media #{$tablet}{
      font-size: 15px;
      padding: 3% 23%;
    }
    @media #{$mobile} {
      font-size: 11px;
      padding: 2% 20%;
    }
  }
}
